<template>
  <div>
    <el-row class="row-bg" type="flex" align="middle">
      <h3>角色管理</h3>模块为你展示当前组织部门中的角色信息，同时，在本模块还可以修改角色信息
    </el-row>
    <el-card>
      <ft-pagination :current-page="1" :total="totalRowNum" @pageChange="load">
        <div slot="toolbar" style="text-align: left;display:inline-block;">
          <el-button size="small" type="primary" icon="el-icon-refresh" @click="load(pageIndex,pageSize)">刷新
          </el-button>
          <el-button size="small" type="primary" icon="el-icon-plus"
                     @click="add">新建
          </el-button>
          <el-input style="width: 240px;margin-left: 72px;" type="text" v-model="filter" placeholder="请输入..."
                    @change="load(pageIndex, pageSize)"></el-input>
        </div>
        <el-row v-if="data.length==0" style="text-align: center;color: #DD8800;font-size: 16px;">
          当前系统中还没有任何角色信息，点击上方 “新建” 按钮添加相关信息！
        </el-row>
        <el-table :data="data" v-if="data.length>0">
          <el-table-column label="编码" prop="roleCode" width="150" align="left">
            <template slot-scope="scope">
              <ft-input v-model="scope.row.roleCode" :editable="scope.row.editing"></ft-input>
            </template>
          </el-table-column>
          <el-table-column label="角色" prop="roleName" width="150" align="left">
            <template slot-scope="scope">
              <ft-input v-model="scope.row.roleName" :editable="scope.row.editing"></ft-input>
            </template>
          </el-table-column>
          <el-table-column label="应用权限" prop=""></el-table-column>
          <el-table-column label="API权限" prop=""></el-table-column>
          <el-table-column label="功能操作" align="center">
            <template slot-scope="scope">
              <el-button slot="reference" type="text" v-if="scope.row.editing" size="small"
                         @click="save(scope.$index,scope.row)">保存
              </el-button>
              <el-button slot="reference" type="text" v-if="scope.row.editing" size="small"
                         @click="cancel(scope.$index,scope.row)">取消
              </el-button>
              <el-button slot="reference" type="text" v-if="!scope.row.editing" size="small"
                         @click="edit(scope.$index, scope.row)">编辑
              </el-button>
              <el-button slot="reference" type="text"
                         v-if="!scope.row.editing&&(scope.row.status=='INIT'||scope.row.status=='STOP')" size="small"
                         @click="enabled(scope.$index, scope.row)">启用
              </el-button>
              <el-button slot="reference" type="text" v-if="!scope.row.editing&&(scope.row.status=='START')"
                         size="small"
                         @click="disabled(scope.$index, scope.row)">禁用
              </el-button>

              <el-popover v-if="!scope.row.editing&&scope.row.status=='INIT'"
                          placement="top"
                          width="160"
                          v-model="scope.row.delVisible">
                <p>确定删除吗？</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="small" type="text" @click="scope.row.delVisible = false">取消</el-button>
                  <el-button type="primary" size="small" @click="handleDelete(scope.$index, scope.row)">确定</el-button>
                </div>
                <el-button slot="reference" type="text" size="small" style="color: #b96463">删除</el-button>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
      </ft-pagination>
    </el-card>
  </div>
</template>

<script>
  export default {
    name: "Role",
    mounted() {

    },
    data() {
      return {
        filter: null,
        pageIndex: 1,
        pageSize: 8,
        totalRowNum: 0,
        data: []
      }
    },
    methods: {
      load(pageIndex, pageSize) {
        this.pageIndex = pageIndex
        this.pageSize = pageSize
        this.data = []
        this.$http.post('/joys-rest/joys-master-data/roles/query', this.filter, {
          params: {
            pageIndex: pageIndex,
            pageSize: pageSize
          }
        }).then(resp => {
          this.data = resp.body.rows
          this.data.forEach((item, index) => {
            item.editing = false
          })
          this.totalRowNum = resp.body.total
        }, resp => {
          this.$message.error(resp.body.message)
        })
      },
      add() {
        this.data.push({editing: true, status: 'INIT'})
      },
      save(index, value) {
        this.$http.post('/joys-rest/joys-master-data/roles/save', value).then(resp => {
          resp.body.editing = false
          this.$set(this.data, index, resp.body)
          this.$message.success('操作成功！')
        }, resp => {
          this.$message.error(resp.body.message)
        })
      },
      edit(index, value) {
        value.editing = true
        this.$set(this.data, index, value)
      },
      cancel(index, value) {
        if (value.tenantId) {
          this.$http.get('/joys-rest/joys-master-data/tenant/' + value.tenantId).then(resp => {
            resp.body.editing = false
            this.$set(this.data, index, resp.body)
          }, resp => {
            this.$message.error(resp.body.message)
          })
        } else {
          this.data.splice(index, 1)
        }
      },
      handleDelete(index, value) {
        this.$http.delete('/joys-rest/joys-master-data/roles/' + value.roleId + "/" + value.dataVersion).then(resp => {
          this.data.splice(index, 1)
          this.$message.success('删除成功！')
        }, resp => {
          this.$message.error(resp.body.message)
        })
      },
      enabled(index, value){
        value.status='START'
        this.$http.post('/joys-rest/joys-master-data/roles/save', value).then(resp => {
          resp.body.editing = false
          this.$set(this.data, index, resp.body)
          this.$message.success('启用成功！')
        }, resp => {
          this.$message.error(resp.body.message)
        })
      },
      disabled(index, value){
        value.status='STOP'
        this.$http.post('/joys-rest/joys-master-data/roles/save', value).then(resp => {
          resp.body.editing = false
          this.$set(this.data, index, resp.body)
          this.$message.success('禁用成功！')
        }, resp => {
          this.$message.error(resp.body.message)
        })
      }
    }
  }
</script>

<style scoped>
  .row-bg {
    height: 50px;
    background-color: #E4E8EB;
    font-size: 12px;
    padding-left: 20px;
  }
</style>
